<template>
  <div class="about-container">
    <div class="about-layout">
      <!-- 左侧菜单 -->
      <div class="about-menu">
        <el-menu
          :default-active="activeIndex" 
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <el-icon><InfoFilled /></el-icon>
            <span>董事长致辞</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Timer /></el-icon>
            <span>集团简介</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><Medal /></el-icon>
            <span>管理团队</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><Medal /></el-icon>
            <span>才知历程</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon><Medal /></el-icon>
            <span>才知荣誉</span>
          </el-menu-item>
          <el-menu-item index="6">
            <el-icon><Medal /></el-icon>
            <span>才知慈善</span>
          </el-menu-item>
        </el-menu>
      </div>
      
      <!-- 右侧内容 -->
      <div class="content-area">
        <div v-if="activeIndex === '1' || subPage === 0" class="content-section">
          <h2>才知理念</h2>
          <p>才知集团自1999年创立至今，在激烈的行业竞争中，凭借对市场的把控和社会各界朋友的支持、关爱，才知人步步为营，一步一个脚印，成长为今天涵盖产业园开发、酒店服务业为主的多元化公司，在此感谢每一位才知人的辛苦付出，感谢每一位关心才知朋友，并真诚期待各界朋友给予一如既往的支持！
时代在变，市场在变，企业在变。把握变化大势，合上时代节拍，才知注重打造规范透明的管理机制，对员工给予发展的平台、实践的机会，提升员工的综合素质、管理能力、业务能力，强化执行力，打造一支过硬的团队；对客户，我们强调以诚信为本，致力于提升客户满意度，以客户的口碑打造才知的品牌；对合作伙伴，我们渴望合作共赢，与合作伙伴风雨同舟、携手同行、共谋发展！
“高效严谨，精细务实”是我们倡导的企业作风。我们要事事做到思维慎密，行事严谨，对做项目的每一个细节都赋予一种责任，精雕细琢用心去做，我相信：才知前行的步履会越走越坚实，越走越有力！</p>
        </div>
        
        <div v-if="activeIndex === '2' || subPage === 1" class="content-section">
          <h2>才知生活</h2>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in history"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
        
        <div v-if="activeIndex === '3' || subPage === 2" class="content-section">
          <h2>精彩视频</h2>
          <div class="cert-grid">
            <el-card v-for="(cert, index) in certifications" :key="index" class="cert-card">
              <img :src="cert.image" class="cert-image">
              <div class="cert-title">{{ cert.title }}</div>
            </el-card>
          </div>
        </div>
        <div v-if="activeIndex === '4' || subPage === 3" class="content-section">
          <h2>精彩视频</h2>
          <p>1999年创立于珠海
            2002年明星苑项目完成
            2003年明星商厦完成
            2004年白藤山宾馆开业
            2007年美地项目开工
            2009年才知办公楼、美一方园项目开工
            2010年中心城项目开工
            2011年松滋才知文化广场项目开工
            2012才珠海才知佳人会客厅斗门旗舰店开业</p>
        </div>
        <div v-if="activeIndex === '5' || subPage === 4" class="content-section">
          <h2>精彩视频</h2>
          <div class="cert-grid">
            <el-card v-for="(cert, index) in certifications" :key="index" class="cert-card">
              <img :src="cert.image" class="cert-image">
              <div class="cert-title">{{ cert.title }}</div>
            </el-card>
          </div>
        </div>
        <div v-if="activeIndex === '6' || subPage === 5" class="content-section">
          <h2>精彩视频</h2>
          <div class="cert-grid">
            <el-card v-for="(cert, index) in certifications" :key="index" class="cert-card">
              <img :src="cert.image" class="cert-image">
              <div class="cert-title">{{ cert.title }}</div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import {
  InfoFilled,
  Timer,
  Medal,
  Histogram,
  Briefcase,
  Trophy,
  Monitor,
  Connection,
  DataLine
} from '@element-plus/icons-vue'

const route = useRoute();
const subPage = ref(null);
const activeIndex = ref('1');

// 处理菜单选择
const handleSelect = (key) => {
  activeIndex.value = key;
  // 触发自定义事件，通知面包屑组件更新
  window.dispatchEvent(new CustomEvent('setSubMenuIndex', { 
    detail: { 
      path: '/about',
      index: Number(key) - 1
    } 
  }));
};

// 根据URL参数更新子页面
const updateSubPage = () => {
  if (route.query.sub !== undefined) {
    const subIndex = Number(route.query.sub);
    subPage.value = subIndex;
    // 同步更新左侧菜单选中项
    activeIndex.value = (subIndex + 1).toString();
  } else {
    subPage.value = null;
  }
};

// 监听路由变化
watch(() => route.query.sub, updateSubPage);

// 监听子菜单选择事件
const handleSubMenuSelect = (event) => {
  if (event.detail && event.detail.path === '/about') {
    const index = event.detail.index;
    subPage.value = index;
    activeIndex.value = (index + 1).toString();
  }
};

// 页面加载时初始化
onMounted(() => {
  updateSubPage();
  // 监听子菜单选择事件
  window.addEventListener('setSubMenuIndex', handleSubMenuSelect);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('setSubMenuIndex', handleSubMenuSelect);
});

// 企业历史数据
const history = [
  {
    content: '公司成立',
    time: '1999年',
    type: 'primary'
  },
  {
    content: '明星苑项目完成',
    time: '2002年',
    type: 'success'
  },
  {
    content: '明星商厦完成',
    time: '2003年',
    type: 'warning'
  },
  {
    content: '白藤山宾馆开业',
    time: '2004年',
    type: 'success'
  },
  {
    content: '美地项目开工',
    time: '2007年',
    type: 'success'
  },
  {
    content: '才知办公楼、美一方园项目开工',
    time: '2009年',
    type: 'success'
  },
  {
    content: '中心城项目开工',
    time: '2010年',
    type: 'success'
  },
  {
    content: '松滋才知文化广场项目开工',
    time: '2011年',
    type: 'success'
  },
  {
    content: '珠海才知佳人会客厅斗门旗舰店开业',
    time: '2012年',
    type: 'success'
  }
];

// 企业资质数据
const certifications = [
  {
    title: '高新技术企业证书',
    image: '/src/assets/images/cert1.jpg'
  },
  {
    title: 'ISO9001认证',
    image: '/src/assets/images/cert2.jpg'
  },
  {
    title: '企业信用等级证书',
    image: '/src/assets/images/cert3.jpg'
  }
];
</script>

<style scoped>
.about-container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-layout {
  display: flex;
  gap: 0px;
  min-height: 600px;
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.about-menu {
  width: 25%;
  flex-shrink: 0;
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 80px;
  height: fit-content;
}

.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 600px;
  width: 900px;
  margin: 0 auto;
}

.content-section {
  min-height: 500px;
  position: relative;
  width: 100%;
}

.content-section h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

.content-section p {
  line-height: 1.8;
  color: #666;
  margin-bottom: 15px;
}

.cert-card, .business-card, .honor-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.cert-image, .honor-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.cert-title, .honor-title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.honor-year {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

.business-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 10px;
}

.business-card h3 {
  margin: 10px 0;
  font-size: 18px;
}

.business-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.el-timeline-item__node) {
  background-color: #409EFF;
}

:deep(.el-timeline-item__timestamp) {
  color: #666;
}

:deep(.el-steps) {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

:deep(.el-step__title) {
  font-size: 16px;
  font-weight: bold;
}

:deep(.el-step__description) {
  color: #666;
  margin-top: 5px;
}

.cert-grid,
.business-grid,
.honor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.el-timeline {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.intro-content,
.history-content,
.cert-content,
.evolution-content,
.business-content,
.honor-content {
  min-height: 500px;
  padding: 20px;
}
</style> 